<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Demo</title>
</head>
<body>
<div class="banner">
    <span>Welcome to My Web Demo</span>
</div>
<div class="time_show">
    <span id="time_display">00:00:00</span>
</div>
<div class="funny">
    <img src="image/icon-godzilla.png"/>
</div>
<div class="calendar">
    <div class="title">
        <div class="year">
            <span id="calendar_year">Year</span>
        </div>
        <div class="green month">
            <span id="calendar_month">Month</span>
        </div>
        <div class="green">
            <a href="" id="prev">prev</a>
            <a href="" id="next">next</a>
        </div>
    </div>
    <div class="content">
        <table>
            <thead>
            <tr>
                <td>Mon</td>
                <td>Tue</td>
                <td>Wen</td>
                <td>Thu</td>
                <td>Fri</td>
                <td>Sat</td>
                <td>Sun</td>
            </tr>
            </thead>
            <tbody id="days">
            </tbody>
        </table>
    </div>
</div>
</body>
<style>
    body{text-align: center}
    .funny img {width: 200px; height: 200px}
    .banner {height: 60px;}
    .banner span{padding-top: 20px; font-size: xx-large; color: coral; font-weight: bolder;}
    banner h2 {color: coral}
    .time_show {
        width: 200px;
        height: 30px;
        background: black;
        color: yellow;
        padding-top: 10px;
        margin: auto;
        position: relative;
        border-radius: 20px;
        font-size: 20px;
        text-shadow: 2px 3px 5px lightyellow;
    }
    .location {height: 60px; margin-top: 20px}
    .location a {text-decoration: chocolate}
    .calendar {
        width: 450px;
        height: 320px;
        margin: auto;
        box-shadow:0px 1px 1px rgba(0,0,0,0.4);
    }
    .calendar .title {height: 100px}
    .green {color: #6ac13c}
    .calendar .title .year {background: lightgreen; height: 25px; padding-top: 5px; color: white; font-weight: bolder}
    .calendar .title .month {height: 30px; padding-top: 10px; font-size: larger; font-weight: bold}
    .calendar .title a {font-size: smaller; color: #6ac13c;}
    table {width: 100%;}
    thead tr {height: 40px; font-family: Arial; font-weight: bold; font-size:14px; color: darkgray}
    thead td {width: 14.28%}
    .content-list ul {width: 100%; font-family: Arial; font-weight: bold; font-size:14px;}
    .content-list li {
        width: 14.28%;
        height: 36px;
        list-style-type: none;
        float: left;
        text-align: center;
    }
    .greenbox {background: #6ac13c; color: #fff}
    .lightgrey {color: lightgrey;}
</style>
<script >
    var month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31];
    var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
    var month_name = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    var holder = document.getElementById("days");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var ctitle = document.getElementById("calendar_month");
    var cyear = document.getElementById("calendar_year");

    var my_date = new Date();
    var my_year = my_date.getFullYear();
    var my_month = my_date.getMonth();
    var my_day = my_date.getDate();

    console.log("==>", my_year, my_month+1, my_date.getDate())
    //获取某年某月第一天是星期几
    function dayStart(month, year) {
        var tmpDate = new Date(year, month, 1);
        return (tmpDate.getDay());
    }

    //计算某年是不是闰年，通过求年份除以4的余数即可
    function daysMonth(month, year) {
        var tmp = year % 4;
        if (tmp === 0) {
            return (month_olympic[month]);
        } else {
            return (month_normal[month]);
        }
    }

    function refreshDate(){
        var str = "";
        var totalDay = daysMonth(my_month, my_year); //获取该月总天数
        var firstDay = dayStart(my_month, my_year); //获取该月第一天是星期几
        var myStyle = "";
        str += "<tr>"
        console.log("first day:", firstDay, my_day)
        for(let i = 1; i < firstDay; i++){
            str += "<td></td>"; //为起始日之前的日期创建空白节点
        }
        let dayOfWeek=firstDay;
        for(let i = 1; i<=totalDay; i++){
            if ((my_day > i && my_month === my_date.getMonth() && my_year ===  my_date.getFullYear()) || (my_month < my_date.getMonth() && my_year <= my_date.getFullYear()) || my_year < my_date.getFullYear()) {
                myStyle = " class='lightgrey'"
            }
            if (my_day === i && my_year === my_date.getFullYear() && my_month === my_date.getMonth()) {
                myStyle = " class='green greenbox'"
            }
            str += "<td "+ myStyle +">"+i+"</td>"; //创建日期节点
            if (dayOfWeek % 7 === 0) {
                str += "</tr>"
                dayOfWeek=0
            }
            myStyle=""
            dayOfWeek++
        }
        holder.innerHTML = str; //设置日期显示
        ctitle.innerHTML = month_name[my_month]; //设置英文月份显示
        cyear.innerHTML = my_year; //设置年份显示
    }
    refreshDate(); //执行该函数

    prev.onclick = function(e){
        e.preventDefault();
        my_month--;
        if(my_month<0){
            my_year--;
            my_month = 11;
        }
        refreshDate();
    }
    next.onclick = function(e){
        e.preventDefault();
        my_month++;
        if(my_month>11){
            my_year++;
            my_month = 0;
        }
        refreshDate();
    }
</script>
<script>
    var timeDisplay = document.getElementById("time_display");
    function getTime() {
        var dt = new Date()
        var hour = dt.getHours()
        var min = dt.getMinutes().toString()
        var sec = dt.getSeconds().toString()
        if (min.length === 1) {
            min = "0"+min
        }
        if (sec.length === 1) {
            sec = "0"+sec
        }
        return hour + " : " + min + " : " + sec
    }
    setInterval("timeDisplay.innerHTML=getTime();", 1000)
</script>
</html>